body {
  background-color: rgb(223, 212, 167);
}

.box {
  position: relative;
  top: -80px;
  left: 250px;
  width: 150px;
  height: 150px;
  background-color: saddlebrown;
  border: 5px solid rgb(189, 143, 143);
}

.box .box1 {
  width: 100px;
  height: 100px;
  background-color: salmon;
  position: absolute;
  top: 10px;
  z-index: 2;
  border: 5px solid darkcyan;
}

.box2 {
  width: 50px;
  height: 50px;
  background-color: aliceblue;
  position: absolute;
  top: 20px;
  left: 30px;
}

.box3 {
  /* 背景 */
  background-color: cadetblue;
  /* 内边距 */
  padding: 10px;
  /* 边框 */
  border: 10px solid;
  /* 外边距 */
  margin: 10px 5px 15px 5px;
  /* 四角幅度 */
  border-radius: 14px;
  height: 60px;
  width: 60px;
  /* 相对定位 */
  position: relative;
  /* position: absolute; */
  top: 10px;
  background-image: url("https://profile-avatar.csdnimg.cn/f248a533d9a7486588d54e913a7526af_paranoidyang.jpg!3");
  box-shadow: 10px 10px 25px  0px darkseagreen;
}

.float-box {
  background-color: chartreuse;
  height: 200px;
  width: 200px;
  font-size: 10px;
  /* float: left; */
  position: absolute;
}

.back {
  width: 200px;
  height: 200px;
  background-image: url('./f248a533d9a7486588d54e913a7526af_paranoidyang.jpg!3');
  background-repeat: no-repeat;
  background-size: 100% ;
  overflow: scroll;
  /* 
  background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 
    scroll	背景图片随页面的其余部分滚动。这是默认
    fixed	  背景图像是固定的
    inherit	指定background-attachment的设置应该从父元素继承
    local	  背景图片随滚动元素滚动
  */
  background-attachment: local;
}
#example2{
  border: 10px solid black;
  background-size: 100%;
  padding:33px;
  background-image: url('/f248a533d9a7486588d54e913a7526af_paranoidyang.jpg!3');
  /* 
  background-clip属性指定背景绘制区域。
    border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
    padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
    content-box	背景绘制在内容方框内（剪切成内容方框）。 
  */
  background-clip: padding-box
}
/* 
direction 属性规定文本的方向 / 书写方向。 
  ltr	默认。文本方向从左到右。
  rtl	文本方向从右到左。
  inherit	规定应该从父元素继承 direction 属性的值。
*/
.dire{
  direction: ltr;
  /* letter-spacing 属性增加或减少字符间的空白（字符间距）。 */
  letter-spacing: 10px;
}
.dire2{
  direction: rtl;
  letter-spacing: -2px;
}